<template>
  <div style="border:1px solid black">
        这里是二级路由页面
        <!-- 第一种方式使用path，v-bind的对象形式动态绑定data中的值！url="/third?userid=12" -->
        <router-link :to="{path:'/third?userid='+userid}">三级路由页面展示</router-link> |
        <router-link :to="{path:'/third',query:{userid:userid}}">三级路由页面展示</router-link> |
        <!-- 第二种方式使用name属性，v-bind的对象形式动态绑定data中的值！url="/third?userid=12"
      $route.params.uid 则可以取出userid的值！ -->
      <router-link :to="{name:'Third',query:{userid:userid}}">三级路由页面展示</router-link> |
        {{userid}}
        <router-view></router-view>
  </div>

</template>

<script>
export default {
  data() {
    return {
      userid:12
    }
  },
  //生命钩子函数：有一个钩子，钩住浏览器的某一个位置，等浏览器达到那个状态，就自动执行！
  created(){
    //当浏览器打开这个页面创建vue完成的时候，就会执行这段代码！不需要我们手动去触发这个函数。
    console.log(this.$route);
    console.log(this.$router);
   this.userid=  this.$route.params.userid
  },
  watch:{
    $route(to,from){
      console.log(to);
      console.log(from);
      this.userid = to.params.userid;
    }
  }
}
</script>

<style>

</style>